const path = require('path') // 引入 path 模块
const HtmlWebpackPlugin = require('html-webpack-plugin') // 引入处理 HTML 的插件
// 提取css
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin')

/**
 * 写 Webpack 的配置项
 */
module.exports = {
    // 入口
    entry: {
        commonCss: './src/js/common-js/commonCss.js',
        dom: `./src/js/common-js/dom.js`,
        http: `./src/js/common-js/http.js`,
        utils: `./src/js/common-js/utils.js`,
        index: './src/js/index.js',
        login: './src/js/login.js',
        register: './src/js/register.js',
    },

    // 出口
    output: {
        path: path.resolve(__dirname, 'dist'), // 输出的路径，注意，要用绝对路径！
        filename: 'js/[name]-[hash:8].js', // 打包输出的文件名
    },

    // 模式
    mode: 'development',

    // 加载器
    module: {
        rules: [ // 可以用多个加载器
            { // 编译 CSS
                test: /\.css$/, // 匹配所有以 .css 结尾的文件
                use: [
                    // 'style-loader', // 创建 style 标签 把 css 插入 html 的 head 内
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../' // 输出路径
                        }
                    },
                    'css-loader' // 解析加载 css 到 js 中（把 css 打成字符串）。
                ]
            },
            { // 编译 Less
                test: /\.less$/,
                use: [
                    // 'style-loader',
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../' // 资源查找路径
                        }
                    },
                    'css-loader', // 解析css
                    'postcss-loader', // 处理css兼容性
                    'less-loader' // 将 .less 文件编译成 .css
                ]
            },
            { // 编译图片
                test: /\.(png|jpeg|jpg|gif)$/,
                loader: 'url-loader',
                options: {
                    /* 配置项 */
                    // 限制要处理的图片大小，如果小于 2 mb，就进行 base64 转码
                    // 如果大于，就不转码，拷贝到输出目录
                    name: '[hash:16].[ext]',
                    limit: 2 * 1024 * 1024,
                    esModule: false, // 避免 NodeJS 和 ES6 模块化冲突（简单了解）
                    outputPath: 'img',  // 打包后输出目录
                }
            }, { // 加载 HTML 中的资源（图片、视频）
                test: /\.html$/,
                loader: 'html-loader'
            }, { // 处理字体图标
                test: /\.(eot|svg|ttf|woff|woff2)$/, // 处理字体格式文件
                loader: 'file-loader',
                options: {
                    name: '[hash:16].[ext]', // 输出名字
                    outputPath: 'fonts' // 输出路径
                }
            },
            { // 把 ES6 的代码编译成 ES5
                test: /\.js$/,
                loader: 'babel-loader', // loader 编译es6为es5
                exclude: /node_modules/ // 排除
            }
        ]
    },

    // 插件
    plugins: [
        // 1. 把 template 指定的模板 html 输出到输出目录（output设定的，一般是dist）中去
        // 2. 使得 HTML 自动引入打包后的文件（entry入口）
        new HtmlWebpackPlugin({ // 配置对象
            template: './src/index.html',
            filename: './index.html',
            chunks: ['index', 'commonCss', 'dom']
        }),
        new HtmlWebpackPlugin({ // 配置对象
            template: './src/login.html',
            filename: './login.html',
            chunks: ['login', 'commonCss']
        }),
        new HtmlWebpackPlugin({ // 配置对象
            template: './src/register.html',
            filename: './register.html',
            chunks: ['register', 'commonCss']
        }),
        new MiniCssExtractPlugin({ // 提取css
            filename: 'css/[name].css' // 重命名输出的css
        }),

        new OptimizeCssAssetsWebpackPlugin(), // 压缩css
        new CleanWebpackPlugin(),
    ],

    // 开发服务器
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
        compress: true, // 启动gzip
        port: 666, // 端口
        open: true // 自动打开服务
    },
}